<template>
    <div>
        <BasicDialogVue :data="dialog" @close="onCloseDialog(formRef)">
            <template #content>
                <el-form :model="formData" label-width="100px" :rules="rules" ref="formRef">
                    <el-form-item label="新密码" prop="password">
                        <el-tooltip
                            class="box-item"
                            effect="dark"
                            content="密码由字母、数字、特殊符号(._~!@#$%^&*)组成长度为8-20位"
                            placement="top"
                        >
                            <el-input v-model="formData.password" placeholder="请输入登录密码" />
                        </el-tooltip>
                    </el-form-item>
                </el-form>

                <div class="btn">
                    <el-button @click="onCloseDialog(formRef)">取消</el-button>
                    <el-button type="primary" @click="submitForm(formRef)">确定</el-button>
                </div>
            </template>
        </BasicDialogVue>
    </div>
</template>
<script setup lang="ts">
import { userResetPassword } from '@/apis/company/user'
import BasicDialogVue from '@/components/baseDialog/Index.vue'
import { checkPassword_2 } from '@/utils'
import { ElMessage, FormInstance } from 'element-plus'
import { ref, reactive, watchEffect } from 'vue'
const props = defineProps(['visible', 'id'])
const emit = defineEmits(['close'])
const formRef = ref()
const formData = reactive({
    password: '',
    id: ''
})

// 密码验证
const validatePassword = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入登录密码'))
    } else {
        if (checkPassword_2(formData.password)) {
            console.log(1)
            callback()
        } else {
            callback(new Error('密码格式不符合要求'))
        }
    }
}

const rules = reactive({
    password: [{ required: true, validator: validatePassword, trigger: 'blur' }]
})

let resubmit = false

const dialog = reactive({
    visible: false,
    title: '重置密码',
    width: '420px',
    id: '',
    type: 'create'
})

watchEffect(() => {
    dialog.visible = props.visible
    formData.id = props.id
})

//监听关闭
const onCloseDialog = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    emit('close')
}
//监听提交
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return

    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!', formData)
            if (resubmit) {
                return
            }

            resubmit = true
            userResetPassword(formData.password, formData.id).then(
                res => {
                    resubmit = false
                    if (Number(res.data.code) === 200) {
                        formEl.resetFields()
                        emit('close')
                        ElMessage.success('修改成功')
                    }
                },
                () => {
                    resubmit = false
                }
            )
        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>
<style scoped lang="scss">
.btn {
    display: flex;
    justify-content: center;
    margin: 40px 0 16px 0;
}
</style>
